<!-- 参考笔记 【有道云笔记】2.vue3创建响应式数据.md
https://share.note.youdao.com/s/FRhu9vA3 -->

<script lang="ts">
import { defineComponent, ref, reactive, computed, toRefs } from 'vue';

// 自定义state接口，用于约束reactive数据类型
interface IState {
    age: number;
    arr: number[];
    name?: string;
}

export default defineComponent({
    setup() {
        const dom = ref<HTMLElement | null>(null);
        const flag = ref<boolean>(false);
        const state = reactive<IState>({
            age: 18,
            arr: [1, 2, 3, 4, 5]
        });

        const { age, arr } = toRefs(state);
        const getLenth = computed<number>(() => arr.value.length);

        const addArr = (num: number): void => {
            state.arr.push(num);
        };

        const setColor = (): void => {
            if (!dom.value) return;
            const color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
            dom.value.style.color = color;
        };

        return {
            state,
            dom,
            flag,
            age,
            arr,
            getLenth,
            addArr,
            setColor
        };
    }
});
</script>
<!-- <script lang="ts" setup>
import { ref, reactive, computed, toRefs, toRef } from 'vue';

interface IState {
    age: number;
    arr: number[];
    name?: string;
}

const dom = ref(null); // ref，用于获取dom节点
const flag = ref<boolean>(false); // ref，用于存储不可变数据
const state = reactive<IState>({
    age: 18,
    arr: [1, 2, 3, 4, 5]
});

const { age, arr } = toRefs(state);
const getLenth = computed<number>(() => {
    return arr.value.length;
});

const addArr = (num: number): void => {
    state.arr.push(num);
};

// 通过ref获取dom节点，修改样式
const setColor = () => {
    // 随机颜色
    const color = `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`;
    dom.value.style.color = color;
};
</script> -->

<template>
    <div class="main_box">
        <h1>这个案例主要是 ref, reactive, computed, toRefs, toRef 的使用</h1>

        <div class="main_row">
            <div>reactive 数据显示：{{ state.arr }}</div>
            <div>computed 数据显示：{{ getLenth }}</div>
            <el-button type="primary" size="small" @click="addArr(Math.floor(Math.random() * 10))">
                reactive数据修改
            </el-button>
        </div>

        <div class="main_row">
            <div>ref 数据显示：{{ flag }}</div>
            <el-button type="primary" size="small" @click="flag = !flag">ref修改</el-button>
        </div>

        <div class="main_row">
            <div>toRefs 年龄：{{ age }}</div>
            <div style="width: 200px">
                <el-input v-model="age" placeholder="年龄"></el-input>
            </div>
        </div>

        <div class="main_row">
            <div ref="dom">我是绑定ref的组件</div>
            <el-button type="primary" size="small" @click="setColor">修改颜色</el-button>
        </div>

        <div class="main_text">
            <p>ref 获取dom节点</p>
            <p>reactive 创建响应式数据</p>
            <p>computed 计算属性</p>
            <p>toRefs 将reactive数据转换为ref</p>
            <p>toRef 将reactive数据中的某个属性转换为ref</p>
            <p>【详细说明在我的笔记里】</p>
        </div>
    </div>
</template>

<style scoped></style>
